<template>
  <div>
    <div class="detail-repairor">
      <div class="title">报修人信息</div>
      <div class="name">
        <span>{{ info?.personName }}</span>
        <span class="tel" @click="telPhone(info?.personMobile)">
          <span v-if="info?.personMobile">{{ info?.personMobile }}</span>
          <span v-else class="tel-line"></span>
          <svg-icon icon-class="mobile" />
        </span>
      </div>
    </div>
    <div v-if="list?.length">
      <div v-for="item in list" :key="item.id">
        <FourLine />
        <div class="detail-repairInfo">
          <div>
            <span class="title">维修/处理详情</span>
            <span class="time">{{
              dayjs(item.create_time).format("YYYY-MM-DD hh:ss")
            }}</span>
          </div>
          <div>
            <div class="content">{{ item.repair_desc }}</div>
            <PreviewComp
              :imgList="
                item.equipmentRepairResultFiles
                  .filter((i) => isImage(i.url))
                  .map((k) => k.url)
              "
              :videoList="
                item.equipmentRepairResultFiles
                  .filter((i) => !isImage(i.url))
                  .map((k) => k.url)
              "
            />
          </div>
        </div>
      </div>

      <!-- 报修描述 -->
      <div class="repair" v-if="rec.flag">
        <div class="repair-top">
          <div class="describe">
            <div class="desc">
              <span class="word">维修/处理描述</span>
              <span class="tip">*</span>
            </div>
            <van-cell-group>
              <van-field
                v-model="rec.repairDesc"
                rows="2"
                autosize
                label=""
                type="textarea"
                maxlength="256"
                placeholder="请描述设备损坏情况，如：故障现象、外观状况等"
                show-word-limit
              />
            </van-cell-group>
          </div>

          <Upload ref="uploadRef" />
        </div>
      </div>

      <div class="btn" v-if="list?.length">
        <van-button
          type="primary"
          block
          v-if="!rec.flag"
          @click="rec.flag = true"
          >再次维修/处理</van-button
        >
        <van-button type="primary" block @click="submitData" v-else
          >提交</van-button
        >
      </div>

      <div class="btn" v-else>
        <van-button type="primary" block @click="submitData">提交</van-button>
      </div>
    </div>
    <div v-else>
      <!-- 报修描述 -->
      <div class="repair">
        <div class="repair-top">
          <div class="describe">
            <div class="desc">
              <span class="word">维修/处理描述</span>
              <span class="tip">*</span>
            </div>
            <van-cell-group>
              <van-field
                v-model="rec.repairDesc"
                rows="2"
                autosize
                label=""
                type="textarea"
                maxlength="256"
                placeholder="请描述设备损坏情况，如：故障现象、外观状况等"
                show-word-limit
              />
            </van-cell-group>
          </div>

          <Upload ref="uploadRef" />
        </div>
      </div>

      <div class="btn">
        <van-button type="primary" block @click="submitData">提交</van-button>
      </div>
    </div>
    <!-- <DialogPhone ref="phoneRef" /> -->
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
// import DialogPhone from "@/components/DialogPhone/index.vue";
import Upload from "@/components/upload";
import { Toast } from "vant";
import { useRoute } from "vue-router";
import { addRepairInfo } from "@/service/modules/repair";
import PreviewComp from "@/components/previewComp/index.vue";
import LocalCache from "@/utils/cache";
import { isImage } from "@/utils/utils";
import FourLine from "./FourLine.vue";
import dayjs from "dayjs";
import router from "@/router";
const rec = reactive({
  repairDesc: "",
  flag: false,
});
const route = useRoute();
defineProps({
  list: Array,
  info: Object,
});

// const phoneRef = ref();
const uploadRef = ref();
const { name, personId, mobile } = LocalCache.getSession("userInfo");
const submitData = async () => {
  if (!rec.repairDesc) {
    Toast.fail("请填写维修处理描述");
    return false;
  }
  const params = {
    files: uploadRef.value.rec.fileUrls
      .map((i) => {
        return {
          fileType: 1,
          fileUrl: i,
        };
      })
      .concat(
        uploadRef.value.rec.video.map((k) => {
          return {
            fileType: 2,
            fileUrl: k,
          };
        })
      ),
    // fileUrls: uploadRef.value.rec.fileUrls.concat(uploadRef.value.rec.video),
    personId,
    personName: name,
    personMobile: mobile,
    repairId: route.query.id,
    repairDesc: rec.repairDesc,
  };
  const { code } = await addRepairInfo(params);
  if (code === 0) {
    Toast.success("提交成功");
    setTimeout(() => {
      router.push("/home");
    }, 1500);
  }
};
const telPhone = (phone) => {
  window.location.href = `tel:${phone}`;
};
</script>
<style lang="less" scoped>
.detail-repairor {
  padding: 12px 16px;
  background: #fff;
  .title {
    font-size: 14px;
    line-height: 22px;
    color: #303233;
    font-weight: 600;
  }
  .name {
    margin-top: 10px;
    font-size: 14px;
    line-height: 22px;
    color: #333333;
    display: flex;
    justify-content: space-between;
  }
  .tel {
    color: #3e77fa;
    display: flex;
    align-items: center;
    svg {
      margin-left: 10.7px;
      width: 18px;
    }
    &-line {
      width: 9px;
      height: 1px;
      background: #3E77FA;
      line-height: 22px;
    }
  }
}
.detail-repairInfo {
  padding: 12px 16px;
  background: #fff;
  flex: 1;
  > div:first-child {
    display: flex;
    justify-content: space-between;
  }
  .title,
  .time {
    font-size: 14px;
    line-height: 22px;
    color: #303233;
    font-weight: 600;
  }
  .time {
    color: #919599;
    font-weight: 400;
  }
  .content {
    font-size: 14px;
    line-height: 32px;
    color: #333333;
    margin-top: 10px;
    margin-bottom: 8px;
  }
}
.btn {
  padding: 0 28px;
  padding-bottom: 20px;
  button {
    border-radius: 40px;
    background: #3e77fa;
  }
}
.repair {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #fff;
  margin-top: 4px;
  &-top {
    flex: 1;
    margin-bottom: 88px;
  }
  .tip {
    color: red;
  }
  .desc {
    display: flex;
    align-items: center;
  }
  .word {
    font-size: 14px;
    line-height: 50px;
    color: #303233;
  }
  /deep/ .van-cell-group {
    border: 1px dotted #e1e5ea;
    border-radius: 4px;
    .van-field {
      height: 144px;
      padding: 8px 12px;
      padding-bottom: 12px;
      textarea {
        height: 102px !important;
      }
      textarea::placeholder {
        font-size: 14px;
        line-height: 22px;
        color: #c2c6cc;
        letter-spacing: 1px;
      }
      .van-field__word-limit {
        font-size: 14px;
        line-height: 22px;
        color: #c5c5c5;
      }
    }
  }
  [class*="van-hairline"]:after {
    border: none;
  }
  /deep/ .van-uploader {
    margin-top: 16px;
    margin-bottom: 12px;
    border-radius: 4px;
    border: 0.5px solid #e1e5ea;
  }
  .upload-box {
    height: 100px;
    width: 100px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    &-word {
      margin-top: 10px;
      font-size: 12px;
      line-height: 14px;
      color: #919599;
    }
  }
  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
    .right {
      font-size: 14px;
      line-height: 40px;
      color: #c5c5c5;
      span {
        margin-right: 8.75px;
      }
    }
  }
}
</style>
